<template>
  <Modal v-model="modal" :title="title">
    <div class="has-choice">
      <ul>
        <li v-for="(item, index) of listData" :key="index">
          <div class="left">
            <div class="name">{{item.user_name}}({{item.company_name}})</div>
            <div class="info">{{item.address}}</div>
          </div>
          <div class="right">
            <Button type="primary" shape="circle" @click="onJoinCompany(item)">剔除</Button>
          </div>
        </li>
      </ul>
    </div>
    <div slot="footer" align="right">
      <Button type="default" @click="cancel">关闭</Button>
    </div>
    <JoinCompanyitem ref="join" @complete="getData" ></JoinCompanyitem>
    <Loader :status="status" @refresh="getData"></Loader>
  </Modal>
</template>
<script >
import JoinCompanyitem from './JoinCompanyitem'
export default {
    components: {
      JoinCompanyitem
    },
    props:{
      list: {
        type: Array,
        default: ()=> []
      }
    },
    data(){
      return {
        title: '成员列表',
        modal: false,
        listData: null,
        status: 'pass',
        order_id: ''
      }
    },
    created() {
    },
    methods:{
      getData() {
        this.status = 'loading'
        this.$ajaxGet('/order/orderGroupList', {order_id: this.order_id}).then(res => {
          this.status = 'pass'
          this.listData = res
        })
      },
      open (item) {
        this.modal = true
        this.order_id = item.order_id
        this.getData()
      },
      cancel () {
        this.modal = false
      },
      onJoinCompany (item) {
        // this.$refs.join.updataForm(item.id)
      this.$Modal.confirm({
        title: '提示',
        content: '确定剔除当前成员吗？',
        onOk: () => {
          let data = {
            group_id: item.group_id
          }
          this.status = 'loading'
          this.$jsonPost('/order/outOrder', data).then(() => {
             this.status = 'pass'
            this.$Notice.success({
              title: '剔除成功',
              desc: `<span class='font-red'>${item.company_name}</span> 已加剔除。`
            })
            this.getData()
          })
        }
        })
      }
    }
}
</script>
<style scoped>
.tag-modal{
    text-align: center;
}
</style>
